<template>
  <!-- el-card 组件：用于包裹内容，设置阴影 hover 效果，class 用于样式控制 -->
  <el-card class="barcode-card" shadow="hover"> 
    <div class="barcode-container">
      <!-- 表单区域：用于输入数字并验证 -->
      <el-form 
        ref="formRef" 
        :model="form"
        :rules="rules" 
        class="input-form" 
      >
        <el-form-item 
          label="输入数字"  
          prop="barcodeText" 
        >
          <el-input 
            v-model="form.barcodeText" 
            placeholder="请输入要生成一维码的数字" 
            clearable  
            
            :maxlength="20"  
          >
            <template #append>  <!-- 输入框后置内容，放置生成按钮 -->
              <el-button type="primary" @click="generateBarcode"> 
                <el-icon>
                  <RefreshLeft />  <!-- 按钮前置图标 -->
                </el-icon>
                生成  <!-- 按钮文字 -->
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>

      <!-- 一维码显示区域：根据不同状态展示加载、图片、错误等内容 -->
      <div class="barcode-result">
        <!-- 加载状态：v-if 条件渲染，loading 为 true 时显示骨架屏 -->
        <el-skeleton 
          v-if="loading" 
          class="skeleton-loading" 
          :loading="loading" 
        >
          <template #template>  <!-- 骨架屏模板，模拟一维码占位 -->
            <div class="skeleton-barcode"></div>
          </template>
        </el-skeleton>

        <!-- 一维码生成成功：barcodeUrl 有值时渲染 -->
        <div v-else-if="barcodeUrl" class="barcode-image-container">
           <!-- 绑定图片地址，展示生成的一维码 -->
          <img 
            :src="barcodeUrl" 
            alt="生成的一维码" 
            class="barcode-image" 
            @error="handleImageError" 
          > <!-- 图片加载失败时触发的方法 -->
          <div class="barcode-text">{{ form.barcodeText }}</div>  <!-- 展示输入的数字文本 -->
          
          <!-- 下载按钮 -->
          <el-button 
            type="success" 
            size="small" 
            class="download-btn" 
            @click="downloadBarcode"  
          ><!-- 点击触发下载图片方法 -->
            <el-icon><Download /></el-icon>  <!-- 下载图标 -->
            下载图片 
          </el-button>
        </div>

        <!-- 生成失败/错误状态：errorMessage 有值时渲染 -->
        <el-empty 
          v-else-if="errorMessage" 
          description="生成失败" 
          class="error-state" 
        >
          <p class="error-message">{{ errorMessage }}</p>  <!-- 展示具体错误信息 -->
          <el-button type="text" @click="clearError">清除错误</el-button>  <!-- 清除错误状态按钮 -->
        </el-empty>

        <!-- 初始状态：未输入/未生成时渲染空提示 -->
        <el-empty 
          v-else 
          description="请输入数字并点击生成按钮" 
        ></el-empty>
      </div>
    </div>
  </el-card>
</template>

<script setup>
// 引入 Vue 核心响应式 API
import { ref, reactive, onMounted } from 'vue'; 
// 引入 Element Plus 图标和消息提示组件
import { Picture, RefreshLeft, Download } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'; 
import myaxios from '@/Http/RabbitHelp';

// 表单数据：响应式对象，存储输入的数字
const form = reactive({
  barcodeText: '' 
});

// 表单验证规则：数组形式，每个对象对应一个校验规则
const rules = {
  barcodeText: [
    { 
      required: true,  // 是否必填
      message: '请输入数字',  // 校验不通过提示文案
      trigger: 'blur'  // 失去焦点时触发校验
    },
    { 
      pattern: /^\d+$/,  // 正则：只能是数字
      message: '请输入纯数字', 
      trigger: 'blur' 
    }
  ]
};

// 响应式变量：用于状态管理
const barcodeUrl = ref('');  // 存储生成的一维码图片地址
const loading = ref(false);  // 控制加载状态
const errorMessage = ref('');  // 存储错误信息
const formRef = ref(null);  // 表单引用，用于调用表单验证方法

// API 基础地址：优先从环境变量取，为空时用空字符串（实际需替换为真实后端地址）
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';

/**
 * 生成一维码方法：异步函数
 */
const generateBarcode = async () => {
  // 触发表单验证，验证不通过则 return
  if (!(await formRef.value.validate())) { 
    return;
  }

  // 重置状态：清空之前的图片地址、错误信息，开始加载
  barcodeUrl.value = '';
  errorMessage.value = '';
  loading.value = true;

  try {
 const response=await  myaxios.get("/api/Img/GenerateBarcode", {
      params: {
        text: form.barcodeText 
      },
      // 配置响应类型为 blob，让 axios 知道要处理二进制响应
      responseType: 'blob' 
    });
    
    

     // 将响应转换为 Blob 对象（二进制大对象，用于存储图片等数据）
    // axios 已按 blob 解析，直接用 response.data 即可
    const blob = response.data; 
    // 创建本地 URL 用于展示图片
    barcodeUrl.value = URL.createObjectURL(blob); 

    // 提示生成成功
    ElMessage.success('一维码生成成功'); 
  } catch (err) {
    // 捕获错误，设置错误信息并提示
    errorMessage.value = err.message || '生成一维码时发生错误'; 
    ElMessage.error(errorMessage.value);
  } finally {
    // 无论成功失败，结束加载状态
    loading.value = false; 
  }
};

/**
 * 处理图片加载错误方法：图片加载失败时调用
 */
const handleImageError = () => {
  errorMessage.value = '图片加载失败，请重试';  // 设置错误信息
  barcodeUrl.value = '';  // 清空图片地址
};

/**
 * 清除错误状态方法：点击“清除错误”按钮时调用
 */
const clearError = () => {
  errorMessage.value = '';  // 清空错误信息
};

/**
 * 下载一维码图片方法：点击“下载图片”按钮时调用
 */
const downloadBarcode = () => {
  // 图片地址为空时，直接返回
  if (!barcodeUrl.value) return; 

  // 创建 a 标签，模拟点击下载
  const link = document.createElement('a'); 
  link.href = barcodeUrl.value;  // 设置下载地址
  // 拼接下载文件名，包含输入的数字
  link.download = `barcode_${form.barcodeText}.png`; 
  document.body.appendChild(link);  // 添加到页面
  link.click();  // 触发点击
  document.body.removeChild(link);  // 移除 a 标签

  // 提示下载成功
  ElMessage.success('图片下载成功'); 
};

// 组件挂载后执行的逻辑：当前无初始化操作，可扩展
onMounted(() => {
  // 可在这里添加初始化逻辑，比如默认加载数据等
});
</script>

<style scoped>
/* 组件样式：scoped 表示样式仅作用于当前组件 */
.barcode-card {
  max-width: 600px;
  margin: 2rem auto;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  color: #409eff;
  font-size: 1.2rem;
}

.header-title {
  font-size: 1.2rem;
  font-weight: 500;
}

.barcode-container {
  padding: 1rem 0;
}

.input-form {
  margin-bottom: 2rem;
}

.barcode-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.skeleton-loading {
  width: 100%;
}

.skeleton-barcode {
  width: 200px;
  height: 80px;
  margin: 0 auto;
  border-radius: 4px;
}

.barcode-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.barcode-image {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.barcode-image:hover {
  transform: scale(1.02);
}

.barcode-text {
  font-size: 0.9rem;
  color: #606266;
  padding: 0.3rem 0.5rem;
  background-color: #fff;
  border-radius: 4px;
}

.download-btn {
  margin-top: 0.5rem;
}

.error-state {
  width: 100%;
}

.error-message {
  color: #f56c6c;
  margin-top: 0.5rem;
}
</style>